<template>
  <vue-excel-editor v-model="jsondata">
    <vue-excel-column field="user" label="User ID" type="string" width="80px" />
    <vue-excel-column field="name" label="Name" type="string" width="150px" />
    <vue-excel-column field="phone" label="Contact" type="string" width="130px" />
    <vue-excel-column
      field="gender"
      label="Gender"
      type="select"
      width="50px"
      :options="['F', 'M', 'U']"
    />
    <vue-excel-column field="age" label="Age" type="number" width="70px" />
    <vue-excel-column field="birth" label="Date Of Birth" type="date" width="120px" />
  </vue-excel-editor>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const jsondata = ref([
  {
    user: '123456',
    name: 'John Doe',
    phone: '1234567890',
    gender: 'M',
    age: 25,
    birth: '2021-01-01',
  },
])
</script>

<style></style>
